<template>
  <div>
<!--    111111111111-->
    <el-table :data="brand.slice((currentPage-1)*pageSize,currentPage*pageSize)" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
      <el-table-column type="selection" width="60">
      </el-table-column>
      <el-table-column type="index" width="30">
      </el-table-column>
      <el-table-column prop="id"  label="编号" width="40" sortable>
      </el-table-column>
      <!--        <el-table-column prop="apply"  label="采购单编号" width="40" sortable>-->
      <!--        </el-table-column>-->
      <el-table-column prop="f_user"  label="用户编号" width="40" sortable>
      </el-table-column>
      <el-table-column prop="out_trade_no"  label="快递单编号" width="140" sortable>
      </el-table-column>
      <el-table-column prop="time"  label="创建时间" width="120" sortable>
      </el-table-column>
      <el-table-column prop="price"  label="支付总金额" width="90" sortable>
      </el-table-column>
<!--      <el-table-column prop="date"  label="支付时间" width="160" sortable>-->
<!--      </el-table-column>-->
      <el-table-column prop="province"  label="收货地址" width="90" sortable>
      </el-table-column>
      <el-table-column prop="address"  label="详细地址" width="90" sortable>
      </el-table-column>
      <el-table-column prop="state"  label="收货状态" width="80" sortable>
        <template   slot-scope="scope">
          <span v-if="scope.row.state===1" style="color:blue">已发货</span>
          <span v-if="scope.row.state===0" style="color:orangered">未发货</span>
          <span v-if="scope.row.state===2" style="color:magenta">申请退货</span>
          <span v-if="scope.row.state===3" style="color:green">确认收货</span>
          <span v-if="scope.row.state===4" style="color:red">退货</span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination align='center'
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="currentPage"
                   :page-sizes="[1,5,10,20]"
                   :page-size="pageSize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="brand.length">
    </el-pagination>
  </div>
</template>

<script>
var _index;
export default {
  name: 'FOrderManger',
  data() {
    return {
      addForm: {
        image: ''
      },
      rules: {
        image: [
          { required: true, message: '请上传图片', trigger: 'blur' }
        ]
      },


      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },

      options: [
        {
          value: '0',
          label: '暂不发货'
        },
        {
          value: '1',
          label: '发货'
        }],


      currentPage:1,
      pageSize:5,
      titleMap: {
        addEquipment:'新增',
        editEquipment: "编辑"
      },
      //新增和编辑弹框标题
      // dialogStatus: "",
      Form: {
        id: '',
        f_user: '',
        parcelid:'',
        time:'',
        price:'',
        date:'',
        f_site:'',
        state:'',
        datetime:'',
        out_trade_no:'',
      },

      brand:[
      ],
      buyer: {
        uid:'',
        name:''
      },
      approve: {
        uid:'',
        name:''
      },
      books:{
        id:'',
        name:''
      },

      editFormRules:{
        name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' }
        ],
        reserve: [
          { required: true, message: '请输入商品库存', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '请输入商品描述', trigger: 'blur' }
        ],
      },
      FormVisible: false,
      currentRow:[],
      ids:[],
      listLoading:'',
      addBtnshow:false,
      editBtnshow:false,
      editLoading:'',
      dialogStatus: '',
      selected:[],
      editid:'',
      searchForm:[]
    }
  },
  created() {
    let id=this.$store.state.user.list.id
    // alert(id)
    this.$http.post('/forder/select',{id:id}).then(data=>{
      console.log(data);
      this.brand = data;
    });
    // this.$http.post('/applydate/selectBuyer').then(data=>{
    //   console.log(data);
    //   this.buyer = data;
    // });
    // this.$http.post('/applydate/selectAuditor').then(data=>{
    //   console.log(data);
    //   this.approve = data;
    // });
    // this.$http.post('/fuser/select').then(data=>{
    //   console.log(data);
    //   this.books = data;
    // });

  },
  methods: {
    handleChange(file, fileList) {
      this.addForm.image = URL.createObjectURL(file.raw)
      // var files = this.addForm.image
      // files.push(this.addForm.image)
    },
    beforeupload(file) {
      return true
    },
    submitForms(addForm) { // 新增表单提交
      this.axios({
        method: 'post',
        url: 'url',
        headers: { Authorization: window.sessionStorage.getItem('token') },
        data: { }
      })
        .then(res => {
          this.$refs[addForm].validate((valid) => {
            if (valid) {
              this.$refs.upload.submit()
              // 不可缺少
            } else {
              console.log('error submit!!')
              return false
            }
          })
        })
        .catch(function(error) {
          console.log(error)
        })
    },

    selsChange: function (val) {  //点击选中
      console.log(val);
      this.selected = val;
    },
    // 点击新增
    addRow (brand, event) {
      this.FormVisible = true;
      this.Form = {
        id: 0,
        name: '',
        price: 0,
        date: '',
      };

      this.dialogStatus = "addEquipment"
      this.addBtnshow = true
      this.editBtnshow = false

    },
    // 点击确定（新增）
    confirmAdd () {
      this.$http.post("/forder/insert", this.Form).then(add => {
        //alert(add);
        if (add > 0) {
          alert("添加成功");
          window.location.reload();
        } else {
          alert("添加失败")
        }
      })
      this.FormVisible = false;
    },
    //点击编辑
    handleEdit: function (index, row) {
      this.FormVisible = true;
      this.Form = Object.assign({}, row); //这句是关键！！！
      _index = index;
      console.log(index);
      console.log(_index);

      this.dialogStatus = "editEquipment"
      this.addBtnshow = false
      this.editBtnshow = true
    },
    // 点击确定（编辑）
    confirmEdit () {
      //alert( this.Form.state);
      this.$http.post("/forder/update", this.Form).then(add => {
        alert("发货成功");
        window.location.reload();
      });
    },
    //点击关闭dialog
    handleClose (done) {
      //  done();
      //  location.reload();
      this.FormVisible = false;
    },
    //点击取消
    handleCancel (formName) {
      this.FormVisible = false;
    },
    // 删除
    handleDelete (index, rows) {

      // console.log(index, row);
      this.Form.id = rows
      // alert(this.Form.id);
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.post("/forder/delete", this.Form).then(add => {
          if (add > 0) {
            type: 'success';
            message: '删除成功!';
            window.location.reload();
          } else {
            alert("修改失败")
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    removebrand () {
      this.$confirm('此操作将永久删除 ' + this.selected.length + ' 条数据, 是否继续?', '提示', {type: 'warning'})
        .then(() => {
          console.log(this.selected);
          var ids = [];
          //提取选中项的id
          $.each(this.selected, (i, brand) => {
            ids.push(brand.id);
          });
          // 向请求服务端删除
          //  var resource = this.$resource(this.url);
          resource.remove({ids: ids.join(",")})
            .then((response) => {
              this.$message.success('删除了' + this.selected.length + '个用户!');
              this.getbrand();
            })
            .catch((response) => {
              this.$message.error('删除失败!');
            });
        })
        .catch(() => {
          this.$Message('已取消操作!');
        });
    },

    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    stateFormat (row, column, cellValue) {
      // console.log(row , column , cellValue)
      if (!cellValue) return "";
      if (cellValue.length > 40) {
        //最长固定显示4个字符
        return cellValue.slice(0, 40) + "...";
      }
      return cellValue;
    },
    clickContent: function (row, column, cell, event) {
      clickContent(row, column, cell, event)
      {
        if (column.label === '数据内容') {  // 只有点击数据内容列时才会展开
          row.flag = !row.flag  // 这个参数是当时将数据存储到表格中时特意加上控制表格的展开和省略的
        }
      }
    }

  },
}
</script>
<style>

</style>
